<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<title>武汉理工大学出版社</title>
		<script src="js/jquery-3.2.1.min.js"></script>
		<script src="js/rem.js"></script>
		<link rel="stylesheet" href="css/reset.css">
		<script src="js/v3.2.8/vue.global.prod.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/axios.min.js"></script>
		<script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>	
		
	</head>
	<body>
		<!-- 头部 -->
		<div id="header"></div>
		
		<div class="back" id="app">
			<div class="from">
				<!-- <div class="wx">
					<img :src="show?'static/wxIcon.png':'static/qqIcon.png'"/>
					<span>{{show?'微信扫码登录':'QQ扫码登录'}}</span>
				</div> -->
				<!-- <div class="code_img">
					<iframe src="https://open.weixin.qq.com/connect/qrconnect?appid=wx9fdd7bbe32ba7420&redirect_uri=https%3A%2F%2Fdbs.wutp.com.cn%2FCM-API%2FmemberApi%2Fauth%2FwechatCallback&response_type=code&scope=snsapi_login&state=sunset#wechat_redirect"></iframe>
				</div> -->
				<div class="qq">
					<p></p>
					<span class="text">登录方式</span>
					<p></p>
				</div>
				<div class="qq_img">
					<!-- <a :href="wxcode" id="wx"> -->
						<img style="margin-right: 50px;" src="static/wxIcon.png" @click="oncode(wxcode)"/>
					<!-- </a> -->
					<!-- <a :href="qqcode" id="qq"> -->
						<img src="static/qqIcon.png" @click="oncode(qqcode)">
					<!-- </a> -->
				</div>
				<div class="checkbox">
					<input type="checkbox" name="input1" id="box1">
					<label for="box1">勾选代表你同意</label>
					<span @click="onAgreement(1)">《用户协议》</span>
					<span @click="onAgreement(2)">《隐私声明》</span>
				</div>
			</div>
		</div>
		
		<div class="footer">
			<a href="https://beian.miit.gov.cn/#/Integrated/index"><span>理工图书网 2006-2023 .    All Rights Reserved .    鄂ICP备15017753号-1</span></a>
			<a href="https://www.beian.gov.cn/portal/registerSystemInfo?recordcode=42011102004108"><span>鄂公网安备 42011102004108号</span></a>
		</div>
	</body>
	<script>
		// new WxLogin({
		//   self_redirect:false,
		//   id:"login_container", 
		//   appid: "wx9fdd7bbe32ba7420", 
		//   scope: "snsapi_login", 
		//   redirect_uri: encodeURIComponent("https://open.weixin.qq.com/connect/qrconnect?appid=wx9fdd7bbe32ba7420&redirect_uri=https%3A%2F%2Fdbs.wutp.com.cn%2FCM-API%2FmemberApi%2Fauth%2FwechatCallback&response_type=code&scope=snsapi_login&state=sunset#wechat_redirect"),
		//   state: Math.ceil(Math.random()*1000), 
		//   style: "black",
		//   href: ""
		// });
		var checked = false;
		const App = {
			data() {
				return {
		            show:true,
					wxcode:'',
					qqcode:'',
					ysxy:"",
					yhxy:''
				}
			},
			mounted(){
				this.getLoginWxCode();
				this.getLoginQQCode();
			},
			methods:{
				async getLoginWxCode() {
					let that = this;
					await axios({
						method: "get",
						url: "http://dbs.wutp.com.cn/CM-API/memberApi/auth/getLoginWxCode",
					}).then(function (res) {
						var key = res.data.split(':')[1]+':'+res.data.split(':')[2];
						that.wxcode = key;
						$('#wx').attr('href',key); 
					})
				},
				async getLoginQQCode() {
					let that = this;
					await axios({
						method: "get",
						url: "http://dbs.wutp.com.cn/CM-API/memberApi/auth/getLoginQQCode",
					}).then(function (res) {
						that.qqcode = res.data.data;
						$('#qq').attr('href',res.data.data);
					})
				},
				onAgreement(e){
					window.location.href= "agreement.html?type="+e;
				},
				oncode(e){
					if(checked){
						window.location.href= e;
					}else{
						alert("请阅读并同意用户协议与隐私政策")
					}
				}
			}
		};
		Vue.createApp(App).mount('#app');
		 $("#box1").click(function(){
			if(this.checked==true){
				console.log("复选框被选中了")
				checked = true
			}else{
				console.log("复选框未被选中")
				checked = false
			}
		})
	</script>
	<style>
		.back{
			width: 100%;
			height: 80vh;
			background: url(static/loginBack.png) no-repeat;
			background-size: 100%;
			position: relative;
		}
		.header_nav{
			display: none;
		}

		.from {
			background-color: #fff;
			width: 5.1rem;
			position: absolute;
			top: 50%;
			right: 2.81rem;
			transform: translate(0, -50%);
			border-radius: 0.2rem;
		}
		.from{
			padding: 0.3rem 0 0.4rem;
		}
		.from .wx{
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.from .wx img{
			width: 0.26rem;
			height: 0.26rem;
			margin-right: 0.16rem;
		}
		.from .wx span{
			font-size: 0.18rem;
			line-height: 0.18rem;
		}
		.from .code_img{
			text-align: center;
			margin-top: 0.2rem;
		}
		.from .code_img img{
			width: 1.7rem;
			height: 1.7rem;
		}
		.from .qq{
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 0.2rem 0 0.4rem;
		}
		.from .qq p{
			width: 1.5rem;
			height: 0.01rem;
			background-color: #e5ded8;
		}
		.from .qq span{
			padding: 0 0.12rem;
			color: #676767;
			font-size: 0.2rem;
		}
		.qq_img{
			text-align: center;
			margin: 0.14rem 0 0.6rem;
			cursor: pointer;
		}
		.qq_img img{
			width: 0.6rem;
			height: 0.6rem;
		}
		.checkbox{
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 0.2rem;
		}
		.checkbox input{
			margin-right: 0.04rem;
		}
		.checkbox label{
			font-size: 0.16rem;
			color: #666666;
			line-height: 0.16rem;
		}
		.checkbox span{
			font-size: 0.16rem;
			color: #ae0c17;
			line-height: 0.16rem;
			cursor: pointer;
		}
		.footer{
			height: 1.3rem;
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.footer span{
			padding: 0 0.4rem;
			font-size: 0.17rem;
		}
	</style>
</html>
